<template>
  <div class="menu">
    <Header title="商城分类" right-icon="iconfont-search" light />
    <div class="menuCate">
      <div class="oneNav">
        <!-- vant侧边导航 -->
        <van-sidebar
          style=" white-space: nowrap; overflow-y: scroll;"
          v-model="activeKey"
        >
          <van-sidebar-item
            v-for="item in oneList"
            :title="item.mobile_name"
            :key="item.id"
            @click="change(item.id)"
          />
        </van-sidebar>
      </div>
      <!-- 右边内容区域 -->
      <div class="twoNav" style="flex:1">
        <div
          class="content"
          v-for="value in oneList"
          :key="value.id"
          :class="id === value.id ? 'isshow' : ''"
        >
          <!-- 图片 -->
          <div class="twoNav_pic">
            <img :src="'http://122.51.249.55:3000/' + value.image" alt="" />
          </div>
          <!-- 内容标签区 -->
          <div class="cateTag" v-for="val in twoList" :key="val.id">
            <van-divider
              :style="{
                color: 'color: #999999;',
                borderColor: '#999999'
              }"
            >
              {{ val.mobile_name }}
            </van-divider>

            <van-tag
              text-color="#999"
              color="#fff"
              v-for="tag in val.sub_category"
              :key="tag.id"
            >
              <router-link :to="'goodlist/' + val.parent_id"
                >{{ tag.mobile_name }}
              </router-link></van-tag
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Header from "@/components/Header";
import Footer from "@/components/Footer";
export default {
  components: {
    Header,
    Footer
  },
  data() {
    return {
      activeKey: 0,
      oneList: [],
      twoList: [],
      isshow: "isshow",
      id: "1", //点击的标签的id
      parent_id: 1 //父级id
    };
  },
  created() {
    this.getMenu();
    this.getMenuList();
    this.change(this.id);
  },
  methods: {
    async getMenu() {
      let { data: res } = await this.$axios.get("Goods/goodsCategoryList");
      if (res.status !== 1)
        return this.$notify({ type: "danger", message: res.msg });
      this.oneList = res.result;
    },
    // 获取二三级分类
    async getMenuList() {
      let { data: res } = await this.$axios.get(
        "Goods/goodsSecAndThirdCategoryList",
        {
          params: {
            parent_id: this.parent_id
          }
        }
      );
      if (res.status !== 1)
        return this.$notify({ type: "danger", message: res.msg });
      this.twoList = res.result;
    },
    // 点击切换
    change(id) {
      this.id = id;
      this.parent_id = id;
      this.getMenuList(); //重新渲染列表
    }
  }
};
</script>

<style lang="less" >
.menu {
  .header {
    .ct {
      font-size: 32px;
    }
    .rt {
      transform: translateY(50%) !important;
    }
  }
  .van-sidebar::-webkit-scrollbar {
    display: none;
  }
  .menuCate {
    display: flex;
    .van-divider {
      width: 265px;
      margin: 0 auto;
    }
    .van-sidebar {
      margin-top: 10px;
      .van-sidebar-item--select {
        color: #ff4f02;
      }
      .van-sidebar-item--select::before {
        height: 90px;
        background-color: #ff4f02;
      }
    }
    .twoNav {
      font-size: 32px;
      font-weight: normal;
      color: #333333;
      flex-direction: column;
      display: flex;
      align-items: center;
      background-color: #f4f4f4;
      .twoNav_pic {
        width: 520px;
        height: 200px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .content {
        display: none;
        margin-top: 10px;
      }
      .isshow {
        display: block;
        align-items: center;
        .van-tag {
          height: 74px;
          background-color: #ffffff;
          border: solid 1px #e5e5e5;
        }
        .cateTag {
          margin-top: 40px;
        }
      }
    }
  }
}
</style>
